import { defineStore } from 'pinia'
// 定义容器
// 参数1：容器的id必须唯一，将来pinia会把所有的容器挂载在根容器
// 参数2：选项对象
// 返回值是一个容器。调用返回容器实例
export const mainStore = defineStore('mainStore', {
  state: () => {
    return {
      pointsInData: [],
      activeTargetId: null,
      sourceOrType: '目标',
      activeCar: null,
      activeCarInfo: null,
      // 设备状态
      mec_data: {},
      // 软件进程监控信息列表+其他集合
      collectStatus_data: [],
      // 感知设备监控信息列表
      sensorModuleStatus_data: [],
      // 写入要代理的数据体
      currentRoute: null, // 当前的路由
      fileTransferTitle: 1, // 文件传输页面的切换值
      LocalUpgradeTitle: 1, // 本地更新的页面的切换值
      currentChildrenRoute: null, // 当前nav的子路由
      reloadVideoRet: 0, //是否刷新视频结果
      uploadFile: {
        name: null,
        size: null,
        body: null,
        path: null,
      }, // 上传的文件信息

      // 感知效果相关
      carData: null, // 车流的数据
      carTipArr: [], // car数组
      pcdHistory: [],
      pcdRetHistory: [],
      carWsConnect: null, // 当前车流的ws连接
      carWsPath: '/obstacles', // ws选中的后缀
      curWsPathId: null,
      showBtnInfo: {
        1: true,
        2: true,
        3: true,
      }, // 头部显示
      isShow2dLabelEffect: true, // 是否显示2d标签
      rightTableEffect: [], // 车流表格数据
      currentEffCarTip: [], // 当前感知点云数据
      currentCarId: null, // 当前点云数据id
      pcdRetHistory: [], // 点云结果数据
      frameNum: 20, // 留存的帧率
      perceivedEffectTopId: 0, // 感知顶部选中的id
      perceivedEffectStatus: 'play', // 是否感知相关操作
      selectMenuListData: null,
      showRight: true, // 显示右边数据
      showPerceivedEffectWebgl: true, // 显示感知效果webgl
      showPerceivedEffectVideo: true, // 显示视频
      showPerceivedEffectLegend: true, // 显示感知效果
      showPerceivedEffectInfo: true, // 显示感知效果图片
      perceivedEffectVideoWidth: 0, // 视频的长度 用以做视频结果计算
      videoBoxList: [], // 视频的box列表
      videoScale: 0.15, // 当前视频的缩放计算
      reloadVideo: 0,
      videoData_Json: [], // 视频的json数据
      checkedVideo: true, // 点云是否显示视频目标
      empyTip: null,

      // 感知截图相关
      captureData: {
        show: false, // 显示框选区域
        showBtn: false, // 显示生成图片按钮
      },
      showPerceivedEffectImageData: {
        data: null,
        name: '',
        show: false,
      }, // 显示感知效果图片

      // 事件相关
      eventData: null,

      // 参数配置相关
      cutArgPage: null, // 切换参数配置页面
      eventTitle: 1, // 事件的初始选择
      perTitle: 1,
      tranTitle: 1,
      // 感知颜色
      carTypeColor: [
        {
          color: '#90ee90',
          type: 'car',
        },
        {
          color: 'red',
          type: 'passenger_car',
        },
        {
          color: '#ffd700',
          type: 'truck',
        },
        {
          color: '#ff8c00',
          type: 'bus',
        },
        {
          color: '#00ced1',
          type: 'bicycle',
        },
        {
          color: '#1e90ff',
          type: 'person',
        },
        {
          color: '#c71585',
          type: 'tractors',
        },
        {
          color: '#FFE1FF',
          type: 'tricycle',
        },
        {
          color: '#FFFF00',
          type: 'spillage',
        },
        {
          color: '#8B658B',
          type: 'Road-cones',
        },
      ],
      srcColor: [
        {
          color: '#ff4500',
          type: '无数据',
        },
        {
          color: '#90ee90',
          type: '相机',
        },
        {
          color: '#ffd700',
          type: '激光雷达',
        },
        {
          color: '#ff8c00',
          type: '毫米波',
        },
        {
          color: '#00ced1',
          type: '相机和激光雷达融合',
        },
        {
          color: '#1e90ff',
          type: '激光雷达和毫米波融合',
        },
        {
          color: '#c71585',
          type: '相机和毫米波融合',
        },
        {
          color: '#FFE1FF',
          type: '相机、激光雷达、毫米波融合',
        },
      ],
    }
  },

  // 类似于组件中的计算属性
  getters: {},

  // 异步操作
  actions: {
    update_pointsInData(val) {
      this.pointsInData = val
    },
    update_activeTargetId(val) {
      this.activeTargetId = val
    },
    update_sourceOrType(val) {
      this.sourceOrType = val
    },
    update_active_car(val) {
      this.activeCar = val
    },
    update_active_carInfo(val) {
      this.activeCarInfo = val
    },
    updateMecData(val) {
      this.mec_data = val
      // console.log('this.mec_data', val)
    },
    updatePSData(val) {
      this.collectStatus_data = val
    },
    updateSMSData(val) {
      this.sensorModuleStatus_data = val
    },
  },
})

/*
 *类似于组件的data。用来存储全局状态
 *1.必须是函数 --> 为了避免服务端渲染的时候，避免交叉请求导致的的数据状态污染
 *2.必须是箭头函数 -->为了避免更好的TS类型推导
 *3.state中的数据本身就是动态的代理
 **/
